<template>
	<view class="item-box">
		<view class="_teacher_item">
			<view class="teacher-area">
				<view class="teacher-name">
					<text class="f-w-b">
						{{ info.name }}
					</text>
					<text class="u-m-l-14 f-s-12">
						{{ info.type == 'L' ? '培训师&咨询师' : info.type == 'T' ? '培训师' : '咨询师' }}
					</text>
				</view>
				<view class="u-p-l-32">
					<view class="f-s-14 u-m-t-16 f-w-b">
						{{ info.label }}
					</view>
					<view class="f-s-12  u-m-t-20 u-line-2">
						擅长：{{ info.adeptField }}
					</view>
				</view>
			</view>
			<view class="teacher-avatar">
				<image :src="info.callingBg || info.avatar" mode="aspectFit">
				</image>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {} from 'vue';
	const props = defineProps({
		info: Object,
	})
</script>

<style lang="scss" scoped>
	.item-box {
		// 倾斜
		transform: skewX(-6deg);
		margin-bottom: 56px;
		// background: linear-gradient(to bottom, #BFD7F0,#EBF2FD 30%,#ffffff);
		background: linear-gradient(to right, #6DB3EC, #95CBF7 50%, #CCE7F2);
	}


	._teacher_item {
		transform: skewX(6deg);
		display: flex;
		justify-content: space-between;
		color: #2C659A;
		// background: linear-gradient(to bottom, #BFD7F0,#EBF2FD 30%,#ffffff);
		// box-shadow: 0rpx 0rpx 12rpx 2rpx rgba(0, 0, 0, 0.06);
		// border-radius: 16rpx 16rpx 16rpx 16rpx;

		.teacher-area {
			padding: 16px 0;
			box-sizing: border-box;

			.teacher-name {

				width: fit-content;
				transform: skewX(-6deg);
				background-color: #fff;
				padding: 6px 10px;
				padding-left: 16px !important;
			}

		}

		.teacher-avatar {
			width: 140px;
			min-width: 140px;
			// 从左到右渐变
			// background: linear-gradient(to right, #E8EBF2, #E8EBF2 40%, #EEEFF4 70%, #F3F4F8);
			height: auto;
			margin-top: -50px;

			image {
				width: 100%;
				height: 100%;
				border-radius: 8px 0 0 8px;
			}
		}
	}
</style>